<template>
  <div>
    <el-calendar v-model="value">
      <template #date-cell="{ data }">
        <p :class="data.isSelected ? 'is-selected' : ''">
          {{ data.day.split('-').slice(2).join('-') }}
          {{ data.isSelected ? '✔️' : '' }}
        </p>
      </template>
    </el-calendar>
    <el-card class="box-card" v-if="showData && showData.id">
      <div v-for="(k, index) in showData" :key="index" class="text item">
        {{ k }}
      </div>
    </el-card>
  </div>
</template>

<script lang="ts" setup name="Admin">
import { getDate } from '@/utils/publicFun'
interface DateType {
  id: number
  name: string
  date: string
  demo: string
}
const data: Array<DateType> = [
  { id: 1, name: '刘德华', date: '2023-05-15', demo: '吃饭' },
  { id: 2, name: '刘德华', date: '2023-05-16', demo: '拍电影' }
]
const showData = ref<DateType | null>(null)
const value = ref(new Date())
watch(
  () => value.value,
  newValue => {
    const date = getDate(newValue)
    showData.value = data.find(item => item.date === date) || null
  }
)
</script>

<style scoped lang="scss"></style>
